<template>
  <div class="wrapper">
		<el-dialog
			:width="width"
      :fullscreen="fullscreen"
			:model-value="visible"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
			class="dialog-wrapper"
			align-center
			@close="emit('close')"
		>
			<template #header="{ titleId, titleClass }">
				<div class="title-wrapper">
					
					<div class="title-text"  :id="titleId" :class="titleClass">
						{{ title }}
            <slot name="title_content"></slot>
					</div>
          <div class="close-icon-wrapper" @click="emit('close')">
						<el-icon :size="24" color="#666">
							<Close />
						</el-icon>
					</div>
				</div>
			</template>

			<div v-loading="loading">
				<slot></slot>
			</div>

			<template #footer v-if="showFooter">
				<div class="dialog-footer">
					<el-button
						type="primary"
						class="confirm-btn"
						:loading="btnLoading"
						@click="submit"
					>
						{{ leftText }}
					</el-button>
					<el-button type="info" class="cancel-btn" @click="emit('close')"
						>取消</el-button
					>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { ArrowLeft, Close } from "@element-plus/icons-vue";
import { ref } from "vue";
// import { throttle } from "@/utils/index.ts";

function throttle(fn, delay = 500) {
  let timer = null;
  let firstTime = true;
  return function (args) {
    let that = this;
    if (firstTime) {
      firstTime = false;
      return fn.apply(that, args);
    }
    if (timer) {
      return;
    }
    timer = setTimeout(function () {
      clearTimeout(timer);
      timer = null;
      return fn.apply(that, args);
    }, delay);
  };
}

const btnLoading = ref(false);
const emit = defineEmits(["submit", "close"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
	leftText: {
    type: String,
    default: "保存",
  },
  width: {
    type: String,
    default: "50%",
  },
  visible: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  fullscreen: {
    type: Boolean,
    default: false,
  }
});

const submit = throttle(() => {
  btnLoading.value = true;
  emit("submit");
  setTimeout(() => {
    btnLoading.value = false;
  }, 1000);
});
</script>
<script>
export default {
  name: "index",
};
</script>

<style lang="scss" scoped>
.title-wrapper {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;

  .close-icon-wrapper {
    position: absolute;
    right: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    color: #333;
    cursor: pointer;
  }

  .title-text {
    font-size: 20px;
    color: #333;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .confirm-btn {
    margin-right: 118px;
    width: 150px;
    height: 42px;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }

  .cancel-btn {
    width: 150px;
    height: 42px;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }
}

.wrapper :deep(.el-dialog__body){
  max-height: 75vh !important;
	overflow-y: scroll !important;
}
.wrapper :deep(.el-dialog__header){
	border-bottom: 1px solid #eee;
}
</style>
